<script setup>

import {ElMessage, ElMessageBox} from 'element-plus'
import { useRouter } from 'vue-router';
import { ElButton } from 'element-plus';

const router = useRouter();
const tableData=[
  {clock:'2022-10-10  20:00:23',
    order:'123839393993',
    pay:'34325346457',
    num:'99.99',
    text1:'普通订单',
    text2:'99.99（含运费15）',
    text3:'99.99（含运费15）',
    text4:'似水流连（123123）',
    text5:'微信支付',
    text6:'已支付',
  },
  {clock:'2022-10-10  20:00:23',
    order:'123839393993',
    pay:'34325346457',
    num:'99.99',
    text1:'普通订单',
    text2:'99.99（含运费15）',
    text3:'99.99（含运费15）',
    text4:'似水流连（123123）',
    text5:'微信支付',
    text6:'已支付',
  },
  {clock:'2022-10-10  20:00:23',
    order:'123839393993',
    pay:'34325346457',
    num:'99.99',
    text1:'普通订单',
    text2:'99.99（含运费15）',
    text3:'99.99（含运费15）',
    text4:'似水流连（123123）',
    text5:'微信支付',
    text6:'已支付',
  },


]
const showImage = () => {
  ElMessageBox.alert(
      '<img src="https://inews.gtimg.com/news_bt/OIg1dHIvYaRlyo6PkjPTysVunOPHbeD60rOq6LVu_o1VEAA/1000" alt="图片" style="max-width:100%;">',
      '',
      {
        dangerouslyUseHTMLString: true,
        showConfirmButton: false,
        callback: () => {
          console.log(111111)
        }
      }

  )
}
</script>

<template>
  <el-table  :data="tableData" >
    <el-table-column prop="goods" label="商品信息">
      <template #default="{ row }">
        <div style="display: flex;margin-right: 20px">
          <div>{{row.clock}}</div>
          <div>订单号：{{row.order}}</div>
          <div>支付单号：{{row.pay}}</div>
        </div>
        <div style="display: flex;margin-right: 20px;">
          <el-image
              style="width: 50px; height: 50px; margin-right: 10px"
              src="https://inews.gtimg.com/news_bt/OIg1dHIvYaRlyo6PkjPTysVunOPHbeD60rOq6LVu_o1VEAA/1000"
              fit="fill"
              @click="showImage"
          >

          </el-image>
          <div>啦啦啦啦啦啦阿联啦啦啦</div>
          <div>￥{{row.num}}X 1</div>
        </div>
      </template>

    </el-table-column>
    <el-table-column prop="text1" label="订单来源" width="80" />
    <el-table-column prop="text2" label="应收款" width="80" />
    <el-table-column prop="text3" label="实收款" width="80" />
    <el-table-column prop="text4" label="买家" width="80" />
    <el-table-column prop="text5" label="支付方式" width="80" />
    <el-table-column prop="text6" label="订单状态" width="80" />
    <el-table-column prop="text7" label="操作" width="90" >
    <template #default>
      <el-button @click="$router.push('/order/details')" class="btn">订单详情</el-button>
    </template>
    </el-table-column>
  </el-table>
</template>

<style scoped lang="scss">
el-table{
  width: 100%;
  border: 1px solid #dddddd;
el-table-column{
  border: 1px solid #dddddd;

}
}
.btn{
  border: none;
  background-color: transparent;
  color: #75A2F3;
}

</style>